<!--retained 留存数据模板;-->
<template>
  <article >
  <date-qry-param  @queryForm="query"/>
  <el-table :data="tabledata" border style="width: 100% "   :summary-method="getSummaries"  :header-cell-style="{backgroundColor:theme.bgcolor,color:theme.activeColor}"
            v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-table-column align="center" type="index"></el-table-column>
    <el-table-column align="center" prop="count_date" sortable label="日期" :formatter="dateFormatter"></el-table-column>
    <!--<el-table-column align="center" prop="channel" sortable label="渠道/区服"></el-table-column>-->
    <el-table-column align="center" prop="register_count" sortable label="新增账号"></el-table-column>
    <el-table-column align="center" prop="next_has" sortable label="次日留存"></el-table-column>
    <el-table-column align="center" prop="three_has" sortable label="3日留存"></el-table-column>
    <el-table-column align="center" prop="four_has" sortable label="4日留存"></el-table-column>
    <el-table-column align="center" prop="five_has" sortable label="5日留存"></el-table-column>
    <el-table-column align="center" prop="six_has" sortable label="6日留存"></el-table-column>
    <el-table-column align="center" prop="seven_has" sortable label="7日留存"></el-table-column>
    <el-table-column align="center" prop="fourteen_has" sortable label="14日留存"></el-table-column>
    <el-table-column align="center" prop="thirty_has" sortable label="30日留存"></el-table-column>
  </el-table>
  </article>
</template>

<script>
  import dateQryParam from "@/components/dateQryParam";
  import {mapState,mapGetters} from 'vuex';
    export default {
      components: {dateQryParam},
      data() {
            return {}
      },
      mounted() {
      },
      computed:{
        ...mapState( {
          theme: state => state.app.theme,
          tabledata: state => state.retained.tableData,
          loading:state => state.retained.loading,
        })
      },
      methods :{
        dateFormatter:function(row, column, cellValue) {
          return cellValue?new Date(cellValue).Format("yyyy-MM-dd"):'';
        },
        getSummaries:function (params ) {
          const sums = [];
          const{columns, data} = params;
          columns.forEach((column,index) => {
            sums[index] = '';
            let values = data.map(item => Number(item[column.property] || 0));
            if(index === 0){
              sums[index] = '合计';
              return;
            }
            if(index > 1) {
              sums[index] = values.reduce((p, c) => {
                return p + 100*c;
              }, 0)/100;
              return;
            }
          });
          return sums;
        },
        query:function (param) {
          this.$emit('query',param);
        }

      }
    }

</script>

<style>

</style>
